<!doctype html>
<html lang="zh-cn">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>个人简历</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <style>
      @import url("https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap");
      body {
        font-family: "JetBrains Mono", sans-serif;
      }
      * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
      }
      @media print {
        .resume-container {
          box-shadow: none !important;
          margin: 0 !important;
          padding: 1rem !important;
        }
      }
    </style>
  </head>
  <body class="bg-gray-50 min-h-screen backdrop-opacity-100">
    <div class="max-w-[800px] my-0 mx-auto p-[3rem] bg-white rounded-lg relative min-h-screen">
      <div class="pb-2 flex justify-end text-xs text-gray-600 opacity-50 absolute top-8 right-[3rem]">
        2025-09-21 @ 图灵智能创新团队
      </div>
      <div class="border-gray-800 relative flex items-end mb-10 justify-between min-h-[120px]">
        <div class="flex-col flex gap-2 flex-1 flex-shrink-0">
          <div class="text-7xl text-black tracking-wide flex-1">周嘉琪</div>
          <div class="text-4xl text-gray-600">前端开发</div>
        </div>

        <div class="text-lg font-light text-gray-500 tracking-wide flex-col flex absolute right-0 bottom-0">
          <div class="text-right">信息管理与信息系统 | 信管1241</div>
          <div class="text-right">13510395013 | Lukejq0517@163.com</div>
        </div>
      </div>

      <div class="grid gap-10">
        <div class="group">
          <div
            class="text-2xl text-gray-900 uppercase tracking-wider pb-2 border-b-2 border-gray-200 group-hover:border-gray-400 duration-200 flex-col items-center"
          >
            <div class="flex items-center">
              <div class="flex items-center">兴趣爱好</div>
            </div>
          </div>
          <div class="mt-4">
            <p class="text-gray-700 text-base leading-relaxed tracking-wide">
              写代码写代码写代码写代码写代码写代码写代码写代码写代码写代码写代码写代码写代码写代码
              写代码写代码写代码写代码写代码写代码写代码写代码写代码写代码写代码写代码写代码写代码写代码写代码写
            </p>
          </div>
        </div>

        <div class="group">
          <div
            class="text-2xl text-gray-900 uppercase tracking-wider pb-2 border-b-2 border-gray-200 group-hover:border-gray-400 duration-200 flex-col items-center"
          >
            <div class="flex items-center">
              <div class="flex items-center">个人规划</div>
            </div>
          </div>

          <div class="mt-4">
            <p class="text-gray-700 text-base leading-relaxed tracking-wide">
              写代码写代码写代码写代码写代码写代码写代码写代码写代码写代码写代码写代码写代码写代码
              写代码写代码写代码写代码写代码写代码写代码写代码写代码写代码写代码写代码写代码写代码
              写代码写代码写代码写代码写代码写代码写代码写代码写代码写代码写代码写代码写代码写代码
              写代码写代码写代码写代码写代码写代码写代码写代码写代码写代码写代码写代码写代码写代码
            </p>
          </div>
        </div>

        <div class="group">
          <div
            class="text-2xl text-gray-900 uppercase tracking-wider pb-2 border-b-2 border-gray-200 group-hover:border-gray-400 duration-200 flex-col items-center"
          >
            <div class="flex items-center">
              <div class="flex items-center">加入理由</div>
            </div>
          </div>
          <div class="mt-4">
            <p class="text-gray-700 text-base leading-relaxed tracking-wide">
              写代码写代码写代码写代码写代码写代码写代码写代码写代码写代码写代码写代码写代码写代码
              写代码写代码写代码写代码写代码写代码写代码写代码写代码写代码写代码写代码写代码写代码
              写代码写代码写代码写代码写代码写代码写代码写代码写代码写代码写代码写代码写代码写代码
              写代码写代码写代码写代码写代码写代码写代码写代码写代码写代码写代码写代码写代码写代码
            </p>
          </div>
        </div>

        <div class="group">
          <div
            class="text-2xl text-gray-900 uppercase tracking-wider pb-2 border-b-2 border-gray-200 group-hover:border-gray-400 duration-200 flex-col items-center"
          >
            <div class="flex items-center">
              <div class="flex items-center">技术能力</div>
            </div>
          </div>
          <div class="mt-4">
            <p class="text-gray-700 text-base leading-normal tracking-wide">
              写代码写代码写代码写代码写代码写代码写代码写代码写代码写代码写代码写代码写代码写代码
              写代码写代码写代码写代码写代码写代码写代码写代码写代码写代码写代码写代码写代码写代码写代码写代码写
            </p>
          </div>
        </div>
      </div>

      <div class="flex justify-between items-center text-gray-500 text-sm absolute bottom-8 w-full px-[3rem] right-0">
        <div class="w-6 h-[1px] bg-gray-500"></div>
        <div>TURING</div>
        <div class="w-6 h-[1px] bg-gray-500"></div>
      </div>
    </div>
  </body>
</html>
